<template>
    <div class="dialog" v-if="visible">
        <div class="overlay" @click="close"></div>
        <div class="dialogBox">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        close($event) {
            console.log("??", $event.target);
            this.$emit("close");
        },
    },
};
</script>
<style scoped lang="less">
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.dialogBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
